<template>
	<view class="wrapper u-p-t-60 count">
		<image class="bgImg" src="@/static/login.jpg" />
		<view class="jump" v-show="!hides">
			<u-button type='primary' ripple shape="circle" @click="submit">登录</u-button>
		</view>
		<view class="u-p-40 login" v-show="hides">
			<u-form :model="form" ref="uForm" class="u-m-b-60">
				<u-form-item label-position="top" prop="phone" required border-bottom label="手机号">
					<u-input placeholder="请输入手机号" :maxlength="11" type="number" v-model="form.phone" />
				</u-form-item>
				<u-form-item label-position="top" prop="code" required border-bottom label="密码">
					<u-input placeholder="请输入密码" type="password" required v-model="form.code" />
				</u-form-item>
			</u-form>
			<view class="u-p-l-50 u-p-r-50">
				<u-button ripple shape="circle" type="primary" @click="login">确定</u-button>
			</view>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hides: false,
				form: {
					phone: '',
					code: ''
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur'],
					}],
					code: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}],
				},
				tips: '',
				// refCode: null,
				seconds: 10
			}
		},
		onReady() {
			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
			// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
			// zthis.refCode = this.$refs.uCode;
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			login() {
				this.$refs.uForm.validate(async (valid) => {
					// 验证成功
					if (valid) {
						const params = { //准备接口参数
							phone: this.form.phone,
							password: this.form.code
						}
						const res = await this.$u.api.login(params)
						console.log(res.bindings[0].userId);
						if (res.code == 200) {
							// 登录成功  做跳转
							this.$refs.uToast.show({
								title:"登录成功！",
								type: "success", 
								duration: 1300,
								url:'/pages/index/index?userId='+res.bindings[0].userId
							})
							this.$u.vuex('vuex_token', res.token);//本地化token
							this.$u.vuex('vuex_user', res.profile); //本地化用户信息

						} else {
							this.$u.toast('未知错误！');
						}

					} else {
						this.$u.toast('表单验证失败');
					}
				});
			},
			submit() {
				// console.log(this.hides);
				this.hides = true;
			},
		}

	}
</script>

<style lang="scss" scoped>
	.wrapper {
		.img {
			padding: 80rpx;
		}
	}

	.count {
		position: relative;

		.bgImg {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			height: 100vh;
			width: 100%;
		}
	}

	.login {

		position: absolute;
		width: 90%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50rpx;
		background: rgba(255, 255, 255, 0.8);
	}

	.jump {
		width: 50%;
		margin: 200rpx auto;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>
